<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>蔬记 - 蔬菜种植管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary-color: #2ecc71; /* 主色调：绿色（象征种植） */
            --background-color: #f8fff8; /* 页面背景色 - 淡绿色 */
        }
        
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        body {
            background-color: var(--background-color);
            background-image: 
                radial-gradient(circle at 20% 20%, rgba(46, 204, 113, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(39, 174, 96, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 60%, rgba(88, 214, 141, 0.05) 0%, transparent 50%);
        }
        
        /* iPhone 15 外观模拟 */
        .iphone-frame {
            width: 393px; /* iPhone 15宽度 */
            height: 852px; /* iPhone 15高度 */
            border-radius: 48px; /* 圆角 */
            background: #000;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        .iphone-screen {
            width: 375px;
            height: 812px;
            background: white;
            position: absolute;
            top: 20px;
            left: 9px;
            border-radius: 38px;
            overflow: hidden;
        }
        
        .iphone-notch {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 160px;
            height: 34px;
            background: #000;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            z-index: 100;
        }
        
        .iphone-home-indicator {
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            width: 134px;
            height: 5px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            z-index: 100;
        }
        
        /* Iframe样式 */
        .app-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        /* 页面列表样式 */
        .pages-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 30px;
        }
        
        .page-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            cursor: pointer;
            text-align: center;
        }
        
        .page-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }
        
        .page-icon {
            font-size: 32px;
            margin-bottom: 10px;
            color: var(--primary-color);
        }
        
        .page-name {
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
    <h1 class="text-2xl font-bold mb-6 text-center text-gray-800">蔬记 - 种植管理应用</h1>
    
    <!-- iPhone 15 模拟框架 -->
    <div class="iphone-frame">
        <div class="iphone-screen">
            <!-- 顶部刘海 -->
            <div class="iphone-notch"></div>
            
            <!-- 应用内容区域 -->
            <iframe id="appFrame" class="app-iframe" src="home.html"></iframe>
            
            <!-- 底部指示条 -->
            <div class="iphone-home-indicator"></div>
        </div>
    </div>
    
    <!-- 页面列表 -->
    <div class="pages-container max-w-4xl mx-auto">
        <div class="page-card" onclick="openPage('home.html')">
            <div class="page-icon"><i class="fa fa-home"></i></div>
            <div class="page-name">首页</div>
        </div>
        <div class="page-card" onclick="openPage('growing-plants.html')">
            <div class="page-icon"><i class="fa fa-leaf"></i></div>
            <div class="page-name">菜园</div>
        </div>
        <div class="page-card" onclick="openPage('task.html')">
            <div class="page-icon"><i class="fa fa-tasks"></i></div>
            <div class="page-name">任务</div>
        </div>
        <div class="page-card" onclick="openPage('stats.html')">
            <div class="page-icon"><i class="fa fa-bar-chart"></i></div>
            <div class="page-name">统计</div>
        </div>
        <div class="page-card" onclick="openPage('profile.html')">
            <div class="page-icon"><i class="fa fa-user"></i></div>
            <div class="page-name">我的</div>
        </div>
        <div class="page-card" onclick="openPage('vegetable-library.html')">
            <div class="page-icon"><i class="fa fa-book"></i></div>
            <div class="page-name">蔬菜库</div>
        </div>
        <div class="page-card" onclick="openPage('planting-tips.html')">
            <div class="page-icon"><i class="fa fa-lightbulb-o"></i></div>
            <div class="page-name">种植知识</div>
        </div>
        <div class="page-card" onclick="openPage('logs.html')">
            <div class="page-icon"><i class="fa fa-pencil"></i></div>
            <div class="page-name">种植日志</div>
        </div>
        <div class="page-card" onclick="openPage('reminders.html')">
            <div class="page-icon"><i class="fa fa-bell"></i></div>
            <div class="page-name">提醒中心</div>
        </div>
    </div>
    
    <script>
        // 打开指定页面
        function openPage(pagePath) {
            const iframe = document.getElementById('appFrame');
            iframe.src = pagePath;
        }
        
        // 检测iframe是否加载完成
        document.getElementById('appFrame').onload = function() {
            console.log('页面加载完成');
        };
    </script>
</body>
</html>